<!-- 列表 -->
<template>
	<view class="container">
		<view class="list" v-if="list.length">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="handleNavToShopPage(item)">
				<image class="shop-pic" src="/static/images/index-customer/will-delete/shop.png" mode="aspectFill">
				</image>
				<view class="content">
					<view class="header">
						<view class="top">
							<text class="name">鱼米之乡农资站</text>
							<!-- <text class="label">服务评价：</text>
							<view class="star iconfont active">&#xe604;</view>
							<view class="star iconfont active">&#xe604;</view>
							<view class="star iconfont active">&#xe604;</view>
							<view class="star iconfont active">&#xe604;</view>
							<view class="star iconfont">&#xe604;</view> -->
						</view>
						<view class="middle">
							<text class="label">月销1000+</text>
							<text class="label">好评率90%</text>
							<text class="label">950m</text>
						</view>
						<view class="bottom">
							<text class="tag">满50减10</text>
							<text class="tag">满99减20</text>
						</view>
					</view>
					<view class="body">
						<view class="item">
							<image class="pic" src="/static/images/index-customer/will-delete/goods01.png"
								mode="aspectFit"></image>
							<text class="name">舒绝杀蚁饵剂</text>
							<text class="price">¥9.90</text>
						</view>
						<view class="item">
							<image class="pic" src="/static/images/index-customer/will-delete/goods02.png"
								mode="aspectFit"></image>
							<text class="name">舒绝杀蚁饵剂</text>
							<text class="price">¥8.90</text>
						</view>
						<view class="item">
							<image class="pic" src="/static/images/index-customer/will-delete/goods03.png"
								mode="aspectFit"></image>
							<text class="name">火舒净杀虫粉剂</text>
							<text class="price">¥6.90</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<ListSkeleton v-else></ListSkeleton>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance, computed } from 'vue';
	import api from "@/api/index.js";
	import ListSkeleton from "./skeleton/list.vue";

	// 列表相关
	const list = ref([]);
	onMounted(() => {
		setTimeout(() => {
			list.value = [{}, {}, {}, {}, {}, ];
		}, 3000);
		// getList();
	});

	// 获取列表数据
	const getList = async () => {
		const res = await api.shop_api.getShopList();
	}

	// 跳转到店铺页面
	const handleNavToShopPage = (row) => {
		uni.navigateTo({
			url: '/pagesC-shopping/shop/index'
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 0 20rpx;
		box-sizing: border-box;

		.list {
			padding: 0 25rpx;

			&-item {
				display: flex;
				margin-top: 20rpx;
				padding: 26rpx 15rpx 20rpx 20rpx;
				background-color: white;
				border-radius: 15px;
				transition: background-color 0.2s;

				&:active {
					background-color: #fafafa;
				}

				.shop-pic {
					flex-shrink: 0;
					width: 140rpx;
					height: 140rpx;
					border-radius: 14rpx;
					object-fit: cover;
					object-position: center;
					margin-right: 24rpx;
				}

				.content {
					flex-grow: 1;

					.header {
						height: 146rpx;
						border-bottom: 2rpx dashed #E5E5E5;

						.top {
							display: flex;
							align-items: flex-end;

							.name {
								flex-grow: 1;
								width: 0;
								font-weight: bold;
								font-size: 30rpx;
								color: #222222;
								line-height: 1.5;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
								// padding-right: 20rpx;
							}

							.label {
								flex-shrink: 0;
								font-weight: 500;
								font-size: 22rpx;
								color: #222222;
								line-height: 1.5;
							}

							.star {
								font-size: 20rpx;
								color: #CCCCCC;
								line-height: 33rpx;
								margin-left: 4rpx;

								&.active {
									color: #FE3333;
								}
							}
						}

						.middle {
							display: flex;
							margin-top: 8rpx;

							.label {
								flex-shrink: 0;
								font-weight: 500;
								font-size: 22rpx;
								color: #999999;
								line-height: 1.5;

								&+.label {
									margin-left: 20rpx;
								}

								&:last-child {
									flex-grow: 1;
									margin-left: 25rpx;
									text-align: right;
								}
							}
						}

						.bottom {
							display: flex;
							margin-top: 14rpx;

							.tag {
								height: 30rpx;
								font-weight: 500;
								font-size: 20rpx;
								color: #FE3333;
								line-height: 30rpx;
								background: #FFEFF4;
								border-radius: 8rpx;
								border: 1rpx solid #FE3A3A;
								padding: 0 6rpx;

								&+.tag {
									margin-left: 14rpx;
								}
							}
						}
					}

					.body {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						column-gap: 40rpx;
						padding-top: 26rpx;

						.item {
							display: flex;
							flex-direction: column;
							align-items: center;
							overflow: hidden;

							.pic {
								width: 100%;
								height: 100rpx;
							}

							.name {
								width: 100%;
								font-weight: 500;
								font-size: 22rpx;
								color: #222222;
								line-height: 1.5;
								text-align: center;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								margin-top: 14rpx;
							}

							.price {
								font-weight: bold;
								font-size: 26rpx;
								color: #FE3C26;
								line-height: 1.5;
							}
						}

					}
				}
			}
		}
	}
</style>